<template>
  <div class="detail">
    <Header></Header>
    <div class="loading" v-if="loading"><mt-spinner type="double-bounce" color="#FFBF44"></mt-spinner></div>
    <div class="swiper_box" v-if="!loading">
      <swiper :options="swiperOption">
        <!-- 这部分放你要渲染的那些内容 -->
        <swiper-slide v-for="(item,index) in imgData01" :key="index">
          <img style="height: 230px;width: 100%;border-radius: 10px;display: block;" :src="item.cityImageUrl" class="index_img">
        </swiper-slide>
        <!-- 这是轮播的小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <p class="block_title" style="text-align: center">{{$t('m.cityIntro')}}</p>
    <div class="detail_box">
      <p v-if="showAll" class="text" >{{detailText}}</p>
      <p v-else  class="text" style="display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:11; white-space:pre-wrap;">{{detailText}}</p>
      <a v-if="detailText.length>=250" @click="showAll=true" v-show="!showAll" class="all_btn" href="javascript:;">{{$t('m.viewAll')}}</a>
    </div>
    <p class="block_title">{{$t('m.poDes')}}</p>
    <div class="loading" v-if="imgData01load"><mt-spinner type="double-bounce" color="#FFBF44"></mt-spinner></div>
    <spotList :dataList="itemData01" :showAction="showAction"></spotList>
  </div>
</template>

<script >
  import Header from './comment/header/header.vue'
  import spotList from './comment/spotList/spotList'
  export default {
    data(){
      return{
        showAction:true,
        imgData01:[],
        swiperOption: {
          effect: 'coverflow',
          slidesPerView: 1.17,
          spaceBetween: 1,
//            height:100,
          coverflowEffect: {
            rotate: 0,
            stretch: -40,
            depth: 200,
            modifier: 1,
            slideShadows : true,
          },
          loop: true,
          loopAdditionalSlides : 1,
          slidesOffsetBefore : 0.3,
          pagination: '.swiper-pagination',
          centeredSlides: true,
          paginationClickable: true,
          onSlideChangeEnd: swiper => {
            //这个位置放swiper的回调方法
           console.log(this.detailText)
          },
        },
        swiperSlides: [1, 2, 3, 4, 5],
        showAll:false,
        detailText:'',
        itemData01:[],
        imgData01load:true,
        loading:true
      }
    },
    components: {Header,spotList},
    computted:{
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    methods:{
      detailInfo(){
        let id = this.$route.query.id;
        let that = this;
        that.$axios.get(this.$store.state.apiUrl+'city/getCityByCityId',{
          params: {
            cityId: id,
            userId: sessionStorage.getItem('userId'),
            lang:that.$i18n.locale
          }
        })
          .then(function (res) {
            let detail = res.data.data;
            that.imgData01 = detail.cityImages;
            if(that.$i18n.locale==='zh_cn'){
              that.detailText = (detail.cityDescription).trim();
            }else {
              that.detailText = (detail.cityDescription_en).trim();
            }

            that.loading = false
          })
          .catch(function (error) {
            console.log('获取热门城市失败');
          });
      },
      //获取热门景点
      getHotSpot(){
        let that = this;
        let id = that.$route.query.id;
        that.$axios.get(this.$store.state.apiUrl+'city/findHotSiteBycityId',{
          params:{
            userId:sessionStorage.getItem('userId'),
            locationCityId:id
          }
        })
          .then(function (res) {
            console.log(res.data)
            that.imgData01load = false;
            that.itemData01 = res.data.data;
          })
          .catch(function (error) {
            console.log('获取热门城市失败');
          });
      }
    },
    mounted(){
      this.$store.state.showTab =  false;
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      this.$store.state.detailTitle = this.$route.query.city;
    },
    created(){
      this.detailInfo();
      this.getHotSpot();
    }
  };
</script>

<style scoped="scoped" >
  .detail{padding-top: 0.64rem}
  .detail_box{padding: 0 0.15rem}
  .detail_box .text{font-size: 0.14rem;color: #333333;line-height: 0.18rem;}
  .detail_box .text01{display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:11; white-space:pre-wrap;}
  .all_btn{width: 1.2rem;height: 0.35rem;line-height: 0.33rem;display: block;text-align: center;margin: 0.2rem auto 0;border: 1px solid #FFBF44;border-radius: 1rem; font-size: 0.16rem;color: #FFBF44;}

</style>
